<template>
    <div class="order-content">
        <van-cell center :title="orderItem.mastr_order_no">
            <template #right-icon>
                <van-count-down :time="countDown(orderItem.sub_order[0].create_time)" v-if="orderItem.sub_order[0].status == 0 && orderItem.sub_order[0].is_pay == 0">
                    <template v-slot="timeData">
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </van-count-down>
                <van-button size="small" v-if="orderItem.sub_order[0].status == 0 && orderItem.sub_order[0].is_pay == 1" @click="cancelOrder(orderItem.mastr_order_no,orderItem.sub_order[0].is_pay)">取消订单</van-button>
                <van-button size="small" v-else-if="orderItem.sub_order[0].status == 0 && orderItem.sub_order[0].is_pay == 0" @click="payOption(orderItem)">付款</van-button>
            </template>
        </van-cell>
        <van-card
        v-for="(item,index) of orderItem.sub_order"
        v-show="index <= show_num"
        :key="index"
        :num="item.num"
        :price="item.goods_data.price"
        :desc="'子订单号:'+item.order_no"
        :title="item.goods_data.name"
        :thumb="item.goods_data.image"
        >
            <template #footer>
                <van-button size="small" @click="getDetail(item)">订单详情</van-button>
                <van-button size="small" v-if="item.status == 4&&item.is_pay == 1" @click="()=>{$router.push({path:'/comment',query:{product_id:item.goods_data.id,oid:item.id}})}">评论</van-button>
                <van-button size="small" v-if="item.status == 3&&item.is_pay == 1" @click="receiving(item.id)">确认收货</van-button>
                <van-button size="small" v-if="item.status == 3&&item.is_pay == 1" @click="refund(item.order_no)">申请退款</van-button>
            </template>
        </van-card>
        <van-popup v-model="showCause" round position="bottom" :style="{ height: '50%' }">
            <van-radio-group v-model="checkedCause">
                <van-cell-group>
                    <van-cell v-for="(item,index) of causeList" :key="index" :title="item.value" clickable @click="checkedCause = index">
                        <template #right-icon>
                            <van-radio :name="index" />
                        </template>
                    </van-cell>
                    <!-- <van-radio  :name="item.id">{{item.value}}</van-radio> -->
                </van-cell-group>
            </van-radio-group>
            <van-button type="danger" block class="cancel-btn" @click="delOrder">确认取消</van-button>
        </van-popup>
        <van-action-sheet 
        v-model="showPayOption" 
        :actions="actions" 
        @select="pay" 
        cancel-text="取消" 
        close-on-click-action 
        @cancel="showPayOption = false"/>
        <div class="all-text">
            <van-divider v-if="orderItem.sub_order.length > 1" @click="()=>{show_num?show_num = 0:show_num = 1000}">{{all_text}}</van-divider>
        </div>
    </div>
</template>
<script>
import {RefundOptions,refund,GoodsReceipt,pay } from '../ajax'
import { Toast,ActionSheet } from 'vant';
import {wxPay} from '../wxPay';
export default {
    name:'orderItem',
    props:["orderItem"],
    data() {
        return {
            showCause:false,
            causeList:[],
            checkedCause:'',
            order_no:'',
            showPayOption:false,
            actions: [ { name: '微信支付',color: '#3DCEB9',class: 'wx_pay' },{ name: '余额支付',color: '#3DCEB9',class: 'yue_pay' }],
            show_num:1000
        }
    },
    mounted(){
        // console.log('数据');
        console.log(this.orderItem);
    },
    computed:{
        all_text(){
            return this.show_num?'收起列表':'查看全部';
        }
    },
    methods:{
        cancelOrder(order_no,is_pay){
            this.showCause = !this.showCause;
            this.order_no = order_no;
            this.getRefundOptions(is_pay == '0'?1:2);
            // this.$router.push({path:'/orderCause',query:{order_no}});
        },
        delOrder(){
            const data = {
                mastr_order_no:this.order_no,
                back_reason:this.causeList[this.checkedCause].value
            }
            refund(data).then(res=>{
                // console.log(res);
                Toast('取消成功');
                this.order_no = '';
                this.showCause = !this.showCause;
                this.$emit('updateList');
            })
        },
        getRefundOptions(type){
            const data = {
                admin_id:this.$store.getters.admin_id,
                type
            }
            RefundOptions(data).then(res=>{
                // console.log(res);
                this.causeList = res;
            })
        },
        getDetail(item){
            // console.log(this.orderItem);
            this.$store.commit('order_detail',item);
            this.$router.push('/orderDetail');
        },
        refund(order_no){
            this.$router.push({path:'/refund',query:{order_no}})
        },
        receiving(oid){
            const data = {
                oid,
                uid:this.$store.getters.wxUserInfo.id
            }
            GoodsReceipt(data).then(res=>{
                Toast('收货成功');
                history.go(0);
            })
        },
        pay(item){
                const data = {
                    mastr_order_no:this.orderItem.mastr_order_no,
                    openid:this.$store.getters.wxUserInfo.openid,
                    type: item.class === 'wx_pay'?1:2 //1.微信支付 2.余额支付
                }
                pay(data).then(res=>{
                    // console.log(res);
                    if(item.class === 'wx_pay'){
                        wxPay(res).then(res=>{
                            window.location.href = process.env.NODE_ENV=="development"?`http://${window.location.host}/#/orderStatus?state=1`:`http://${window.location.host}/sxplat/#/orderStatus?state=1`
                        }).catch(err=>{
                            window.location.href = process.env.NODE_ENV=="development"?`http://${window.location.host}/#/orderStatus?state=0`:`http://${window.location.host}/sxplat/#/orderStatus?state=0`
                        })
                    }else{
                        UserInfo({openid:this.$store.getters.wxUserInfo.openid}).then(res=>{
                            console.log(res);
                            // console.log(this.$store.getters.wxUserInfo);
                            this.$store.commit('updateYue',res.integral);
                            this.$router.push({path:'/orderStatus',query:{state:1}});
                            return;
                        })
                    }
                })
        },
        payOption(item){
            if(this.countDown(item.sub_order[0].create_time) <= 0){
                Toast('该订单已取消,无法支付');
                return;
            }
            this.showPayOption = true;
            console.log(item);
            let total = 0;
            for(let i of item.sub_order){
                total += parseFloat(i.goods_data.price) * i.num;
            }

            // console.log(this.$store.getters.wxUserInfo.integral,total);
            if(total > this.$store.getters.wxUserInfo.integral){
                this.actions = [ { name: '微信支付',color: '#3DCEB9',class: 'wx_pay' },{ name: '余额支付',disabled:true,class: 'yue_pay' }];
            }
        },
        countDown(time){
            let time1 = time*1000;
            // console.log(this.$store.getters.config);
            let automatic_refuse = this.$store.getters.config.automatic_refuse?this.$store.getters.config.automatic_refuse.value:5;
            return time1+automatic_refuse*60*1000 - new Date().getTime();
        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#FFFFFF;
    .order-content{
        margin-top: 0.6rem;
        .van-count-down{
            margin-right: 0.2rem;
            .colon {
                display: inline-block;
                margin: 0 2px;
                color: $green;
            }
            .block {
                display: inline-block;
                width: 1rem;
                color: #fff;
                font-size: 0.6rem;
                text-align: center;
                background-color: $green;
            }
        }
        .van-cell__title{
            font-size: 0.8rem;
        }
        .van-card:not(:first-child){
            margin-top: 1px;
        }
        .cancel-btn{
            position: absolute;
            bottom: 0;
        }
    }
    .all-text{
        background: $white;
        .van-divider{
            margin: 0;
        }
    }
</style>